<template>
  <view class="replies-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-icon" @click="navigateBack">
        <text class="iconfont icon-back">&lt;</text>
      </view>
      <text class="title">我的回复</text>
    </view>

    <!-- 回复列表 -->
    <view class="reply-list">
      <view 
        class="reply-item" 
        v-for="(reply, index) in replies" 
        :key="index"
        @click="viewReplyDetail(reply)"
      >
        <!-- 回复内容 -->
        <view class="reply-content">
          <text class="reply-text">{{reply.content}}</text>
          
          <!-- 原内容引用 -->
          <view class="quote-content">
            <text class="quote-prefix">回复 </text>
            <text class="quote-author">{{reply.replyTo.author}}</text>
            <text class="quote-text">：{{reply.replyTo.content}}</text>
          </view>

          <!-- 来源信息 -->
          <view class="source-info">
            <text class="post-title">{{reply.post.title}}</text>
            <text class="reply-time">{{reply.time}}</text>
          </view>
        </view>

        <!-- 互动信息 -->
        <view class="interaction-info">
          <view class="like-info" v-if="reply.likes > 0">
            <text class="like-count">{{reply.likes}}</text>
            <text class="like-text">赞</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      replies: [
        {
          id: 1,
          content: '这个航班时间很合适，我也想换，请问还在找人吗？',
          replyTo: {
            author: '原帖',
            content: '3.15 广州->上海 FAT 320 换班需求'
          },
          post: {
            id: 101,
            title: '换班信息'
          },
          time: '10:30',
          likes: 3
        },
        {
          id: 2,
          content: '好的，明白了，感谢解答',
          replyTo: {
            author: '张飞',
            content: '这个航班已经确定要和其他人换了'
          },
          post: {
            id: 102,
            title: '换班信息'
          },
          time: '昨天',
          likes: 1
        },
        {
          id: 3,
          content: '我这边时间也可以配合，如果需要的话可以详聊',
          replyTo: {
            author: '原帖',
            content: '3.16-18 广州->墨尔本 BAT 787换班需求'
          },
          post: {
            id: 103,
            title: '换班信息'
          },
          time: '昨天',
          likes: 0
        }
      ]
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    viewReplyDetail(reply) {
      uni.navigateTo({
        url: `/pages/profile/replies/detail/index?id=${reply.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.replies-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  position: relative;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  font-size: 36rpx;
  color: #333;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.reply-list {
  background-color: #ffffff;
}

.reply-item {
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.reply-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.reply-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.quote-content {
  background-color: #f7f7f7;
  padding: 16rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  line-height: 1.5;
}

.quote-prefix {
  color: #999;
}

.quote-author {
  color: #576b95;
}

.quote-text {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12rpx;
}

.post-title {
  font-size: 24rpx;
  color: #999;
}

.reply-time {
  font-size: 24rpx;
  color: #999;
}

.interaction-info {
  margin-top: 12rpx;
  display: flex;
  justify-content: flex-end;
}

.like-info {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.like-count {
  font-size: 24rpx;
  color: #576b95;
}

.like-text {
  font-size: 24rpx;
  color: #999;
}
</style> 